<template>
  <div class="hover-click-button-wrapper" :class="{ colorBlue: ifSelect }">
    <slot></slot>
    <div class="hover" :class="{ select: ifSelect }"></div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  ifSelect: boolean
}>()
</script>

<style lang="scss" scoped>
$w: var(--hoverClickButtonWidth);
$h: var(--hoverClickButtonHeight);
$fs: var(--hoverClickButtonFontsize);

.hover-click-button-wrapper {
  position: relative;
  width: $w;
  height: $h;

  line-height: $h;
  text-align: center;
  font-size: $fs;

  &:hover {
    cursor: pointer;
  }

  .hover {
    display: none;

    position: absolute;
    left: 0;
    top: 0;

    width: calc($w * 0.01);
    height: $h;

    background-color: var(--blue);

    transition: 0.3s;
    pointer-events: none;
  }

  &:hover .hover {
    display: block;
  }

  .select {
    display: block;
    width: $w;
    opacity: 0.1;
  }
}
</style>
